/* Apply Inter font to body */
    body {
      font-family: 'cairo';
    }


    /* Custom CSS for animations */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in {
      animation: fadeIn 0.3s ease-out forwards;
    }

    @keyframes shake {
      0% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-5px);
      }

      75% {
        transform: translateX(5px);
      }

      100% {
        transform: translateX(0);
      }
    }

    .animate-shake {
      animation: shake 0.4s ease-in-out;
    }



/* From Uiverse.io by AlimurtuzaCodes */ 
.btns {
  border: none;
  background: #155dfb;
  cursor: pointer;
  transition: all 450ms ease-in-out;
    font-weight: 600;
  color: white;
  font-size: medium;
}

.btns:hover {
  background: linear-gradient(0deg,#0042a5,#3f83ea);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(53, 159, 252, 0.2),
  0px 0px 100px 0px #1745ffbe;
  transform: translateY(-2px);
}
.btns2 {
  border: none;
  background: #01ab15;
  cursor: pointer;
  transition: all 450ms ease-in-out;
    font-weight: 600;
  color: white;
  font-size: medium;
}

.btns2:hover {
  background: linear-gradient(0deg,#00830b,#008814);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 100px 0px #17ff49;
  transform: translateY(-2px);
}


.btns3 {
  border: none;
  background: #4a5565;
  cursor: pointer;
  transition: all 450ms ease-in-out;
    font-weight: 600;
  color: white;
  font-size: medium;
}

.btns3:hover {
  background: linear-gradient(0deg,#950000,#a83f3f);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 100px 0px #ff1717c5;
  transform: translateY(-2px);
}



.btn-slect {
  border: none;
  background: #000000;
  cursor: pointer;
  transition: all 450ms ease-in-out;
  font-weight: 600;
  color: white;
  font-size: medium;
}

.btn-slect:hover {
  background: linear-gradient(0deg,#494949,#2d2d2d);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(0, 0, 0, 0.2),
  0px 0px 100px 0px #000000be;
  transform: translateY(-2px);
  transition: all 450ms ease-in-out;
}